<template>
  <div class="component-upload-image" :style="type==1?'margin-right: 0;':''">
    
    <el-upload
      v-if="type==1"
      multiple
      action="#"
      :show-file-list="true"
      :auto-upload="true"
      list-type="picture-card"
      :limit="limit"
      :on-exceed="handleExceed"
      name="file"
      :on-remove="handleRemove"
      :on-preview="handlePictureCardPreview"
      :class="[!this.show?'hide':'','loadfirst logo']"
      :http-request="handleFileUpload"
    >
      <span v-if="this.show">
        <img src="../assets/images/logo2.png" alt="">
      </span>
    </el-upload>
    
    <el-upload
      v-if="type==2||type==4"
      multiple
      action="#"
      :auto-upload="true"
      list-type="picture-card"
      :limit="limit"
      :on-exceed="handleExceed"
      name="file"
      :on-remove="handleRemove"
      :show-file-list="true"
      :on-preview="handlePictureCardPreview"
      :class="[!this.show?'hide':'','loadfirst2']"
      :http-request="handleFileUpload"
    >
      <span v-if="uploadList.length==0">
        <img src="../assets/images/shenfez.png" alt="">
      </span>
    </el-upload>
    <el-upload
      v-if="type==3"
      multiple
      action="#"
      :auto-upload="true"
      list-type="picture-card"
      :limit="limit"
      :on-exceed="handleExceed"
      name="file"
      :on-remove="handleRemove"
      :show-file-list="true"
      :on-preview="handlePictureCardPreview"
      :class="[!this.show?'hide':'','loadfirst2']"
      :http-request="handleFileUpload"
    >
      <span v-if="uploadList.length==0">
        <img src="../assets/images/guohui.png" alt="">
      </span>
    </el-upload>
    
    <el-upload
      v-if="type==5"
      multiple
      action="#"
      :auto-upload="true"
      list-type="picture-card"
      :limit="limit"
      :on-exceed="handleExceed"
      name="file"
      :on-remove="handleRemove"
      :show-file-list="true"
      :on-preview="handlePictureCardPreview"
      :class="[!this.show?'hide':'','']"
      :http-request="handleFileUpload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <el-dialog
      :visible.sync="dialogVisible"
      title="预览"
      width="800"
      append-to-body
    >
      <img
        :src="dialogImageUrl"
        style="display: block; max-width: 100%; margin: 0 auto"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    type: {String, Number},
    // 图片数量限制
    limit: {
      type: Number,
      default: 1,
    }
  },
  data() {
    return {
      show: true,
      file: [],
      uploadList: [],
      dialogImageUrl: "",
      dialogVisible: false,
    }
  },
  watch: {},
  computed: {},
  methods: {
    // 删除图片
    handleRemove(file, fileList) {
      this.show = true
      var obj = {file: '',type: this.type}
      this.$emit("input", obj)
    },
    handleFileUpload(file) {
      this.show = false
      var obj = {file: file.file,type: this.type}
      this.$emit("input", obj)
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
    },
    // 预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  }
};
</script>
<style scoped lang="scss">
// .el-upload 控制加号部分
::v-deep .hide .el-upload{
    display: none!important;
}
::v-deep .hide{
  display: inline-block!important;
}
// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
    transition: all 0s;
}

::v-deep .el-list-enter, .el-list-leave-active {
    opacity: 0;
    transform: translateY(0);
}
::v-deep input[type="file"]{
  display: none;
}
::v-deep .loadfirst .el-upload--picture-card{
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
}
::v-deep .loadfirst .el-upload--picture-card span{
  width: 80px;
  height: 80px;
  line-height: 100%;
  img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
  }
}
::v-deep .loadfirst2 .el-upload--picture-card{
  width: 180px;
  height: 125px;
  border: none;
  span{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width: 100%;
      height: 100%;
    }
  }
}

</style>
<style>
  .el-form-item__content{
    display: flex;
    flex-wrap: wrap;
  }
  .component-upload-image{
    margin-right: 20px;
    margin-bottom: 10px;
  }
  .component-upload-image:nth-child(3){
    margin-right: 0;
  }
  .loadfirst2 .el-upload-list__item{
    width: 180px;
    height: 125px;
    border: none;
    border-radius: 0;
    margin: 0 0px 8px 0;
  }
  .logo .el-upload-list__item{
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
  }
  .logobox .component-upload-image, .logobox .logo{
    display: flex;
    margin: 0 auto;
  }
</style>

